<!-- 营销短信详情 -->
<template>
    <div class="promotions_details">
        <el-container class="base_details_container">
            <BackTitleView :title="title" />
            <el-main>
                <div class="content">
                    <div class="base_details_title">基本信息</div>
                    <div class="base_details_content_second">
                        <el-form ref="basicFormRef" :model="basicForm" :disabled="readOnly" :rules="basicRules"
                            label-width="100px" class="base_details_form">
                            <el-form-item label="短信名称" prop="name">
                                <el-input v-model="basicForm.name" placeholder="请输入" />
                            </el-form-item>
                            <el-form-item label="短信模版" prop="templeteId">
                                <el-select v-model="basicForm.templeteId" placeholder="请选择">
                                    <el-option v-for="(item, index) in templeteOptions" :key="index" :label="item.label"
                                        :value="item.value" />
                                </el-select>
                            </el-form-item>
                            <el-form-item label="发送对象" prop="targetType">
                                <el-select v-model="basicForm.targetType" placeholder="请选择">
                                    <el-option v-for="(item, index) in targetOptions" :key="index" :label="item.label"
                                        :value="item.value" />
                                </el-select>
                            </el-form-item>
                        </el-form>
                    </div>
                </div>
            </el-main>
            <el-footer>
                <el-button @click="route.go(-1)">取消</el-button>
                <el-button @click="saveForm(0)" type="primary" v-if="!readOnly">保存
                </el-button>
                <el-button @click="saveForm(1)" type="primary" v-if="!readOnly">保存并发送</el-button>
            </el-footer>
        </el-container>
    </div>
</template>

<script setup>
import { $msg } from "@ui/msg";
import BackTitleView from "@com/BackTitleView.vue";
import { ref, reactive } from "vue";
import $ from "@util/base";
import api from "@api/message"
import useRoute from "@util/router";

const templeteOptions = ref([])

const route = useRoute();

const urlQuery = route.query();
const readOnly = urlQuery.type == "show";
var title = "营销短信详情";
getTempleteList()
switch (urlQuery.type) {
    case "show":
        title = "营销短信详情";
        getDetails()
        break;
    case "add":
        title = "新增营销短信";
        break;
    case "modify":
        title = "修改营销短信";
        getDetails()
        break;
}

const targetOptions = [
    {
        label: "全体会员",
        value: "all"
    }
];

const basicForm = ref({
    name: null,
    templeteId: null,
    targetType: null,
});

const basicRules = {
    name: [
        {
            required: true,
            message: "请输入活动名称",
            trigger: "blur",
        },
    ],
    templeteId: [
        {
            required: true,
            message: "请选短信模版",
            trigger: "change",
        },
    ],
    targetType: [
        {
            required: true,
            message: "请选择发送对象",
            trigger: "change",
        },
    ]
};

function getTempleteList() {
    api.templeteList((val) => {
        templeteOptions.value = val
        console.log(val)
    })
}

const activeName = ref("basic");

const basicFormRef = ref(null);

function saveForm(type) {
    basicFormRef.value.validate((valid) => {
        if (valid) {
            $.handleCRU(route.query().type, {
                add: () => { addData(type) },
                modify: () => { modifyData(type) }
            })
        }
    });
}

function addData(type) {
    if (type == 0) {
        api.add(basicForm.value, () => {
            $msg.succ("新增成功");
            back()
        })
    } else {
        api.add(basicForm.value, val => {
            api.send(val.id, () => {
                $msg.succ("发送成功");
                back()
            })
        })
    }
}

function modifyData(type) {
    if (type == 0) {
        api.update(basicForm.value, () => {
            $msg.succ("修改成功");
            back()
        })
    } else {
        api.update(basicForm.value, () => {
            api.send(basicForm.value.id, () => {
                $msg.succ("发送成功");
                back()
            })
        })
    }
}

function getDetails() {
    api.details(urlQuery.code, val => {
        basicForm.value = val
    })
}

function back() {
    route.go(-1)
}
</script>

<style lang="scss" scoped>
.promotions_details {
    height: 100%;

    .money_box {
        span {
            margin: 0 10px;

            &:nth-child(1) {
                margin-left: 0;
            }
        }

        .el-input {
            width: 120px !important;
        }
    }
}

::v-deep input::-webkit-outer-spin-button,
::v-deep input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
}

::v-deep input[type="number"] {
    -moz-appearance: textfield !important;
}
</style>
